<template>
  <div class="w-video" @click="videoClick">
    <div class="w-video-mark">
      <div class="w-video-head">
        <div class="icon-box">
          <img :src="imgUrl31" alt="" class="icon" />
        </div>
        {{ title }}
      </div>
    </div>

    <!-- <video controls class="video5">
      <source src="" type="video/webm" />

      <source src="" type="video/mp4" />

      Download the
      <a href="">WEBM</a>
      or
      <a href="">MP4</a>
      video.
    </video> -->
    <img :src="video_back" class="video5" alt="" />
  </div>
</template>
<script setup>
import imgUrl31 from '@/assets/img/31.png'
import { number } from 'echarts'
const props = defineProps({
  title: {
    type: String,
    default: '视频'
  },
  src: {
    type: String,
    default: ''
  },
  channel: {
    type: Number,
    default: 0
  },
  port: {
    type: Number,
    default: 80
  },
  video_back: {
    type: String,
    default: ''
  }
})

const jkClass = class JkWs {
  url = 'ws://127.0.0.1:25981'
  ws = null

  constructor() {
    this.url = 'ws://127.0.0.1:25981'
    this.init()
  }

  init() {
    this.createWs()
  }

  createWs() {
    this.ws = new WebSocket(this.url)
    this.onopen()
    // 每隔五秒ping一次
    // setInterval(() => {
    //   this.send({ msg: "ping" });
    // }, 5000);
  }

  onopen() {
    this.ws.onopen = (e) => {
      console.log('客户端连接成功')
    }
  }

  onmessage() {
    this.ws.onmessage = (e) => {
      console.log('服务端消息', e)
    }
  }

  onerror() {
    this.ws.onerror = (e) => {
      console.log('服务端消息错误')
    }
  }

  send(obj) {
    this.ws.send(JSON.stringify(obj))
  }

  close() {
    this.ws.close()
  }

  getStatus() {
    // console.log('this.ws', this.ws, this.ws.readyState)
    return this.ws.readyState === 1
  }

  /**
   * 打开监控参数
   * @param ip    监控ip
   * @param port  监控端口号
   * @param channel   监控通道
   * @param account  监控账号
   * @param password   监控密码
   * @param type  监控类别(dhlive, dhhistory, hklive, hkhistory)
   * @param starttime 历史监控开始时间
   * @param endtime   历史监控截至时间
   */
  connectJk({
    ip,
    port,
    channel,
    account,
    password,
    type,
    starttime,
    endtime
  }) {
    // console.log('支持下支持下', ip, port, channel, account, password, type, starttime, endtime)
    let data = {
      ip,
      port,
      channel,
      type,
      username: account,
      pwd: password,
      starttime,
      endtime
    }
    this.send(data)
    // console.log('vzxz')
  }

  connectJk2(
    jkType,
    {
      ip,
      port,
      channel,
      historyChannel,
      account,
      password,
      type,
      starttime,
      endtime
    }
  ) {
    // console.log('支持下支持下', ip, port, channel, account, historyChannel, password, type, starttime, endtime)

    let realChannel = jkType === 'now' ? channel : historyChannel
    let data = {
      ip,
      port,
      channel: realChannel,
      type,
      username: account,
      pwd: password,
      starttime,
      endtime
    }
    this.send(data)
    // console.log('vzxz')
  }
}

const videoClick = () => {
  const jkWs = new jkClass()
  let status = jkWs.getStatus()

  setTimeout(() => {
    console.log('ip', '192.168.1.' + props.src, props.channel, props.port)

    jkWs.connectJk2('hklive', {
      ip: '192.168.1.' + props.src,
      port: props.port,
      channel: props.channel,
      historyChannel: 1,
      account: 'admin',
      password: 'qwertyuiop2580',
      type: 'hklive'
    })
  }, 1000)
}
</script>

<style lang="scss" scoped>
.w-video {
  position: relative;
  width: 100%;
  height: 100%;
  .w-video-mark {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 40%;
    z-index: 3;
    background: linear-gradient(
      180deg,
      rgba(25, 45, 46, 1),
      rgba(25, 45, 46, 0.1) 50%,
      transparent
    );
    .w-video-head {
      padding: 11px 10px;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 9px;
      font-family: Microsoft YaHei UI;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      text-shadow: 0px 2px 2px rgba(14, 14, 14, 0.4);
      .icon-box {
        display: flex;
        justify-content: center;
        align-items: center;
        .icon {
          display: block;
          width: 19px;
          height: 19px;
        }
      }
    }
  }
  .video5 {
    width: 100%;
    height: 100%;
  }
}
</style>
